<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position 的值 relative 和 absolute 定位原点是？</title>
<style type="text/css">
	.a1{
		position: relative;
		width: 500px;
		height: 500px;
		background-color: #000;
	}
	.a2{
		left: 20px;
		top: 20px;
		width: 400px;
		height: 400px;
		position: absolute;
		background-color: #ff0000;
	}
	.a3{
		top: 20px;
		left: 20px;
		width: 300px;
		height: 300px;
		position: absolute;
		background-color: #fff000;
	}
</style>
</head>
<body>
<pre>
相关知识点：

absolute
生成绝对定位的元素，相对于值不为static的第一个父元素的padding box进行定位，也可以理解为离自己这一级元素最近的
一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。

fixed（老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。

relative
生成相对定位的元素，相对于其元素本身所在正常位置进行定位。

static
默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。

inherit
规定从父元素继承position属性的值。
回答：

relative定位的元素，是相对于元素本身的正常位置来进行定位的。

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。这句话
我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元
素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。
</pre>



<div class="a1">
	<div class="a2">
		<div class="a3"></div>
	</div>
</div>







<script type="text/javascript">

</script>
</body>
</html>
